<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <title>添加车位信息</title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="ownerName" id="realName" required  lay-verify="required|realName" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="ownerTel" id="userTel" required  lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input" maxlength="11">
                    <span class="hint_str"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="registerCode" id="registerCode" required  lay-verify="required|number" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-normal" id="getCode">发送验证码</button>
                </div>

            </div>
            <div class="layui-form-item" style="margin-left: 80px">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-lg" lay-submit lay-filter="add">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-lg">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script src="/static/assets/layui.all.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script src="/static/assets/limit.js"></script>
<script>
    $(function () {
        layui.use(['form', 'layer', 'util'], function(){
                var form = layui.form
                    ,layer = layui.layer,
                    util = layui.util;
            form.verify({
                    realName:[
                        /^[\u4e00-\u9fa5]{2,6}$/
                        ,'姓名格式不正确'
                    ],
                    userName:[
                        /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
                        ,'用户名须以字母开头且长度不能低于5位'
                    ]

                });


            var vercode	= 0
            var time = 60;
            var flag = true;


            form.on('submit(add)', function(data){
                    console.log(data)
                    layer.confirm('您确定要增加停车用户吗？', {
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        $.ajax({
                            url:"/owner/add"
                            ,type:"post"
                            ,dataType:"json"
                            ,data:data.field
                            ,success:function (res) {
                                if(res.code===200){
                                    layer.msg("添加成功")
                                    toParent()
                                }else if(res.code===808) {
                                    layer.msg(res.message)
                                }else {
                                    layer.msg("用户名已存在，请重新填写")
                                }
                            }
                        })
                    }, function(){
                        layer.msg('已取消', {
                            time: 2000, //20s后自动关闭
                        });
                    });

                    return false;
                })

            $('#getCode').on('click',function(){

                var phone = $('#userTel').val()
                console.log(phone)
                if(/^1[3456789]\d{9}$/.test(phone)) {
                    $(this).attr("disabled",true);
                    if (flag) {
                        var timer = setInterval(function () {

                            if (time === 60 && flag) {
                                flag = false;
                                $.ajax({
                                    url: '/weiXin/getCode',
                                    type: 'post',
                                    data: {
                                        phone: phone
                                    },
                                    dataType: 'json',
                                    success: function(res) {
                                        if(res.code===200){
                                            layer.msg("验证码发送成功")
                                        }else {
                                            layer.msg("验证码发送失败")
                                        }
                                    },
                                    error: function(res) {
                                        layer.msg("验证码发送错误")
                                    }
                                })

                            } else if (time === 0) {
                                $("#getCode").removeAttr("disabled");
                                $("#getCode").html("免费获取验证码");
                                clearInterval(timer);
                                time = 60;
                                flag = true;
                            } else {
                                $("#getCode").html(time + " s 重新发送");
                                time--;
                            }
                        }, 1000);
                    }
                }else {
                    layer.tips('请正确填写手机号', '#getCode', {
                        tips: [1, '#3595CC'],
                        time: 4000
                    });
                }

            });

            })
    })

</script>